<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)">
			<view slot="navbar-center">骨架屏</view>
		</w-navbar>
		<pageDemoBlock title="基本用法" color="#1c87e4">
			<view class="w-skeleton">
				<view class="demo-content">
					<view class="demo-content-avatar w-skeleton-square">
						<image src="/static/images/avatar.jpg" mode="widthFix"></image>
					</view>
					<view class="demo-content-info">
						<view class="demo-content-nickname w-skeleton-square">技术部一哥</view>
						<view class="demo-content-tip w-skeleton-square">UNI-WUI作者（一个热衷于前端的小菜鸡）</view>
					</view>
				</view>

				<view class="demo-use m-b-2">
					<view class="demo-use-text">
						<view class="demo-use-text-title w-skeleton-square">
							注意：
						</view>
						<view class="w-skeleton-square">最外层元素必须加class为‘w-skeleton’(也可以自定义class类名)</view>
						<view class="demo-use-text-title w-skeleton-square">
							使用：
						</view>
						<view class="w-skeleton-square">
							1.引入组件(或者通过easycom导入),在‘template’中使用组件
						</view>
						<view class="w-skeleton-square">
							2.通过绑定loading(布尔值)来控制显示与加载
						</view>
						<view class="w-skeleton-square">
							3.animation(布尔值)属性来控制是否需要动画效果
						</view>
						<view class="w-skeleton-square">
							4.elColor(字符串)属性来控制加载的颜色值
						</view>

					</view>
				</view>
			</view>
			<w-button type="primary" @click="switchkeleton">加载/显示</w-button>
		</pageDemoBlock>
		<w-skeleton :loading="loading"></w-skeleton>
	</view>
</template>

<script>
	import pageDemoBlock from '@/components/page-demo-block';
	export default {
		components: {
			pageDemoBlock
		},
		data() {
			return {
				loading: true
			};
		},
		methods: {
			switchkeleton() {
				this.loading = !this.loading;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.demo-content {
		display: flex;
		margin-bottom: 60rpx;

		.demo-content-avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.demo-content-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			.demo-content-nickname {
				font-size: 30rpx;
				color: #333;
			}

			.demo-content-tip {
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	.demo-use {
		.demo-use-text {
			

			>view {
				margin-bottom: 16rpx;
			}

			.demo-use-text-title {
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>
